@import url(./base.less);
@import url(./normalize.less);

@rootSize: 37.55rem;

body {
  background-color: #f7f7f7;
}
//顶部
.header {
  z-index: 9999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: (46 / @rootSize);
  background-color: #fff;

  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    li:first-child {
      background-color: #fff;
      width: (65 / @rootSize);
      height: (46 / @rootSize);
      text-align: center;
      line-height:  (46 / @rootSize);
      font-size:  (14 / @rootSize);
      a{
        color: #000;
      }
    }
    li:nth-child(2) {
      flex: 1;
      input {
        position: relative;
        width: 100%;
        height: (30 / @rootSize);
        border: none;
        border-radius: (25 / @rootSize);
        background-color: #f7f7f7;
        padding-bottom: (8 / @rootSize);
      }
      .pic {
        position: absolute;
        top: (18 / @rootSize);
        left: (75 / @rootSize);
        img {
          width: (12 / @rootSize);
          height: (12 / @rootSize);
        }
      }
      input::placeholder {
        line-height: (20 / @rootSize);
        padding-left: (30 / @rootSize);
        font-size:  (14 / @rootSize);
      }
    }
    li:last-child {
      width: (65 / @rootSize);
      img {
        display: inline-block;
        width: (25 / @rootSize);
        height: (25 / @rootSize);
        margin-left: (26 / @rootSize);
        text-align: center;
        margin-top:  (5 / @rootSize);
      }
    }
  }
}

// 主体
.main {
  padding-top: (56 / @rootSize);
  margin-bottom: (56 / @rootSize);
  height:  (1285/ @rootSize);
  // background-color: pink;
  //轮播图
  .banner {
    margin: 0 (15 / @rootSize);

    .pic {
      img {
        border-radius: (10 / @rootSize);
      }
    }
    ul {
      display: flex;
      justify-content: center;
      margin: (10 / @rootSize);
      li {
        width: (8 / @rootSize);
        height: (3 / @rootSize);
        background-color: #dedede;
        margin-right: (8 / @rootSize);
        // margin-bottom: (50 / @rootSize);
        opacity: 0.4;
        &:nth-child(1) {
          background-color: #000;
          opacity: 1;
        }
      }
    }
  }
  //区块
  .section {
    display: flex;
    justify-content: space-between;
    margin: 0 (15 / @rootSize);
    margin-bottom: (14 / @rootSize);
    a {
      width: 50%;
      padding: (12 / @rootSize) (5 / @rootSize);
      .pic img {
        width: 100%;
        height: (70 / @rootSize);
        border-radius: (8 / @rootSize);
      }
    }
  }
  //分栏1
  .column1 {
    .title {
      height: (40 / @rootSize);
      // background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 (15 / @rootSize);
      font-size: (18 / @rootSize);
      div {
        font-weight: 600;
        img {
          width: (12 / @rootSize);
          height: (17 / @rootSize);
        }
      }
    }
    .content {
      display: flex;
      padding: 0 (15 / @rootSize);
      a {
        width: 50%;
        padding: (8 / @rootSize) (5 / @rootSize);
        ul {
          li:nth-child(1) {
            font-weight: 600;
            font-size: (13 / @rootSize);
            color: #101010;
            margin-top: (15 / @rootSize);
            margin-bottom: (8 / @rootSize);
          }
          li:nth-child(2) {
            font-size: (11 / @rootSize);
            color: #999999;
            margin-bottom: (8 / @rootSize);
          }
          li:nth-child(3) {
            font-size: (11 / @rootSize);
            color: #f39800;
            margin-bottom: (8 / @rootSize);
          }
        }
      }
    }
  }
  // 广告位
  .ad {
    img {
      width: 100%;
      height: 100%;
      padding: (10 / @rootSize);
    }
  }
  // 分栏2
  .column2 {
    .title {
      height: (40 / @rootSize);
      // background-color: #fff;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 (15 / @rootSize);
      font-size: (18 / @rootSize);
     margin-bottom: (10 / @rootSize);
      .text {
        a {
          color: #3a3939;
          width: (80 / @rootSize);
          ul {
            display: flex;
            justify-content: space-between;
            li {
              position: relative;
              margin-right: (20 / @rootSize);
              font-size: (14 / @rootSize);
              div {
                position: absolute;
                left: (9 / @rootSize);
                bottom: (-4 / @rootSize);
                width: (10 / @rootSize);
                height: (4 / @rootSize);
                background-color: #11a1ed;
                border-radius: (2 / @rootSize);
              }
            }
            li:last-child {
              color: #b1b1b1;
            }
          }
        }
      }
    }
  }
}
.item {
  padding: (10 / @rootSize) (15 / @rootSize);
  ul {
    height: (110 / @rootSize);
    li {
      display: flex;
// align-items: center;
margin-bottom: (20 / @rootSize) ;
      div {
        img {
          width: (110 / @rootSize);
          height: (80 / @rootSize);
        }
      }

      ul {
        li {
          margin-bottom: (4 / @rootSize);
        }
        li:nth-child(1) {
          font-weight: 600;
          font-size: (12 / @rootSize);
        }
        li:nth-child(2),
        li:nth-child(3) {
          font-size: (10 / @rootSize);
          color: #a5a5a5;
        }
        li:nth-child(4) {
          font-size: (12 / @rootSize);
          color: #a5a5a5;
          span{
            padding: (3 / @rootSize) (12 / @rootSize);
            border: 1px solid  #a5a5a5;
            border-radius: 8%;
       
          }
          span:first-child{
            margin-right:  (10 / @rootSize);
          }
        }
        li:nth-child(5) {
          font-weight: 600;
          color: #f39800;
          font-size: (12 / @rootSize);
          span:last-child{
            color: #f7b341;
            font-size: (2 / @rootSize);
          }
        }

      }
      div:last-child {
        margin-left: (16 / @rootSize);
      }
    }
  }
}
.more{
  height: (60 / @rootSize);
  display: flex;
  justify-content: center;
  margin: 0 (10/ @rootSize) ;
  div{
    color: #a1a1a1;
    width:  (260/ @rootSize);
    height: (38/ @rootSize) ;
   background-color: #f2f2f3;
   text-align: center;
   border-radius: (19/ @rootSize) ;
   line-height:  (38/ @rootSize);
   font-size: (12/ @rootSize);
  }
}
.entrance{
  margin: 0 (15/ @rootSize) ;
  margin-bottom: (60/ @rootSize);
  img{
    border-radius:  (8/ @rootSize);
  }
}
// 底部
.footer {
  z-index: 9999;
  position: fixed;
  padding-top: (8 / @rootSize);
  left: 0;
  bottom: 0;
  width: 100%;
  height: (50 / @rootSize);
  background-color: #fff;

  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      a {
        color: #ccc;
        div {
          img {
            margin: 0 auto;
            width: (18 / @rootSize);
            height: (18 / @rootSize);
            margin-bottom: (5 / @rootSize);
          }
        }
        div {
          font-size: (11 / @rootSize);
          text-align: center;
        }
      }
    }
    // li:first-child a {
    //   color: #000;
    // }
  }
}
